<template>
    <!-- 用户-用户分组 -->
        <div>
            <Card :bordered="false" dis-hover class="ivu-mt"> 
                <div class="new_card_pd">
                    <Form
                          ref="groupFrom"
                          inline
                          :model="groupFrom"
                          :label-width="labelWidth"
                          :label-position="labelPosition"
                          @submit.native.prevent
                  >
                  
                   
                      <FormItem label="门店">
                          <Select
                                  v-model="groupFrom.store_id"
                                  placeholder="请选择"
                                  clearable
                                  class="input-add"
                                  @on-change="operationSearchs"
                          >
                              <Option v-for="(item,index) in store_list" :value="item.id">{{item.name}}</Option>
                          </Select>
                      </FormItem>
                      <FormItem label="状态">
                          <Select
                                  v-model="groupFrom.status"
                                  placeholder="请选择"
                                  clearable
                                  class="input-add"
                                  @on-change="operationSearchs"
                          >
                              <Option v-for="(item,index) in status_list" :value="item.id">{{item.name}}</Option>
                          </Select>
                      </FormItem>
                      <FormItem label="姓名">
                          <Input
                                  v-model="groupFrom.name"
                                  placeholder="请输入姓名手机号"
                                   class="input-add mr14"
                          />
                          <Button class="mr14" @click="operationSearchs" type="primary">查询</Button>
                          <Button @click="reset">重置</Button>
                      </FormItem>
                  </Form>
                </div>
            </Card>

            <Card :bordered="false" dis-hover class="ivu-mt">
              
           
                <!-- 用户分组表格 -->
                <Table :columns="columns1" :data="groupLists" ref="table" class="mt25"
                       :loading="loading" highlight-row
                       no-userFrom-text="暂无数据"
                       no-filtered-userFrom-text="暂无筛选结果">
                    <template slot-scope="{ row, index }" slot="icons">
                        <viewer>
                            <div class="tabBox_img">
                                <img v-lazy="row.icon">
                            </div>
                        </viewer>
                    </template>
                    <template slot-scope="{ row, index }" slot="wedding_user">
                        <div>
                            <div>{{row.real_name}}</div>
                            <div>{{row.user_phone}}</div>
                            <div>{{row.user_address}}</div>
                        </div>
                    </template>

                    <template slot-scope="{ row, index }" slot="goods_info">
                        <div>
                            <div>
                                <img style="width: 80px;height:80px" :src="row.goods.image" alt="">
                            </div>
                            <div>{{row.goods.store_name}}</div>
                        </div>
                    </template>

                    


                    <template slot-scope="{ row, index }" slot="store">
                       
                        <div>{{row.store.name}}</div>
                    </template>
                    
                    
                
                   
                </Table>
                <div class="acea-row row-right page">
                    <Page :total="total" show-elevator show-total @on-change="pageChange"
                          :page-size="groupFrom.limit"/>
                </div>
            </Card>

        </div>
    </template>
    
    <script>
        import { mapState } from 'vuex';
        import { userGroupApi, groupAddApi } from '@/api/user';
        import { operationList, addApi ,editApi,get_store_list,get_role_list} from '@/api/operation';
        import { staffListInfo } from '@/api/store'
        import {orderListNew} from '@/api/order'
        import { orderList} from '@/api/wedding_order';
        export default {
            name: "wedding_order_list",
      
            data() {
                return {
                    order_id:0,
                    grid: {
                        xl: 7,
                        lg: 7,
                        md: 12,
                        sm: 24,
                        xs: 24
                    },
                    detail_model : false,
                    loading: false,
                    columns1: [
                        {
                            title: 'ID',
                            key: 'id',
                            width: 80
                        },
                        {
                            title: '订单编号',
                            key: 'order_id',
                            minWidth: 150
                        },
                        {
                            title: '客户信息',
                            key: 'real_name',
                            slot: 'wedding_user',
                            minWidth: 200
                        },
                        {
                            title: '商品信息',
                            key: 'goods_info',
                            slot: 'goods_info',
                            minWidth: 200
                        },
                        {
                            title: '数量',
                            key: 'total_num',
                            minWidth: 50
                        },
                        {
                            title: '首付',
                            key: 'pay_price',
                            minWidth: 150
                        },
                        {
                            title: '尾款',
                            key: 'final_amount',
                            minWidth: 150
                        },
                        {
                            title: '总金额',
                            key: 'total_price',
                            minWidth: 150
                        },
                       
                      
                        {
                            title: '状态',
                            key: 'status_text',
                            minWidth: 150
                        },
                        {
                            title: '创建时间',
                            key: 'service_date',
                            minWidth: 150
                        },
                        {
                            title: '门店',
                            key: 'store',
                            slot: 'store',
                            minWidth: 200
                        },
                       
                      
                    ],
                    groupFrom: {
                        page: 1,
                        limit: 10,
                        role_id:'',
                        store_id:'',
                        name : '',
                        status : ''
                    },
                    groupLists: [],
                    status_list : [
                        {id:'-2',name:"未支付"},
                        {id:'0',name:"已预订"},
                        {id:'-1',name:"已拒绝"},
                        {id:'1',name:"待结算"},
                        {id:'2',name:"已完成"},
                        {id:'3',name:"售后中"},
                        {id:'4',name:"已取消"},
                    ],
                    store_list : [],
                    role_list : [],
                    total:0
                }
            },
            computed: {
                ...mapState('admin/layout', [
                    'isMobile'
                ]),
                labelWidth () {
                    return this.isMobile ? undefined : 75;
                },
                labelPosition () {
                    return this.isMobile ? 'top' : 'left';
                }
            },
            created () {
                this.getList();
                this.init_data();
            },
            methods:{
                view_detail(id){
                    this.detail_model = true
                    this.order_id = id
                },
                init_data(){
                    staffListInfo().then(res=>{
                      this.store_list = res.data
                  })
                  get_role_list().then(res=>{
                      this.role_list = res.data
                  })
                },
             
                // 列表
                getList () {
                    this.loading = true;
                    orderListNew(this.groupFrom).then(async res => {
                        let data = res.data;
                        this.groupLists = data.list;
                        this.total = data.count;
                        this.loading = false;
                    }).catch(res => {
                        this.loading = false;
                        this.$Message.error(res.msg);
                    })
                },
                pageChange (index) {
                    this.groupFrom.page = index;
                    this.getList();
                },
                operationSearchs(){
                  this.groupFrom.page = 1;
                  this.getList();
              },
              reset(){
                  this.formValidate = {
                    page: 1,
                    limit: 20,
                    name:'',
                    store_id:'',
                    role_id:''
                  };
                  this.getList();
              },
                //修改
                edit(id){
                    this.$modalForm(editApi(id)).then(() => this.getList());
                },
                // 删除
                del (row, tit, num) {
                    let delfromData = {
                        title: tit,
                        num: num,
                        url: `user/operation/delete/${row.id}`,
                        method: 'DELETE',
                        ids: ''
                    };
                    this.$modalSure(delfromData).then((res) => {
                        this.$Message.success(res.msg);
                        this.groupLists.splice(num, 1);
                        if (!this.groupLists.length) {
                          this.groupFrom.page =
                              this.groupFrom.page == 1 ? 1 : this.groupFrom.page - 1;
                        }
                        this.getList();
                    }).catch(res => {
                        this.$Message.error(res.msg);
                    });
                },
            }
        }
    </script>
    <style>
        .ivu-form-item-label{
            width: 100px;
        }
    </style>